<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'考勤请假',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexleft">
					<view class="nostrongtext shenpi" @click="shenpijl">审批记录</view>
				</view>
			</view>
		</header-top>
		<view class="margin_top mainpadding ffffff">
			<view class="inputbox flexbetween">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">请假类型</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween" @click="qjlxShow = true">
					<input class="textxz" type="text" placeholder="请选择请假类型" disabled="true" v-model="qjlxtext">
					<view class="righticon2"></view>
				</view>
			</view>
		</view>
		<view class="margin_top mainpadding ffffff">
			<view class="inputbox flexbetween" @click="timepicker(1)">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">开始时间</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween">
					<input class="textxz" type="text" placeholder="请选择开始时间" disabled="true" v-model="start">
					<view class="righticon2"></view>
				</view>
			</view>
		</view>
		<view class=" mainpadding ffffff">
			<view class="inputbox flexbetween" @click="timepicker(2)">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">结束时间</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween">
					<input class="textxz" type="text" placeholder="请选择结束时间" disabled="true" v-model="end">
					<view class="righticon2"></view>
				</view>
			</view>
		</view>
		<!-- <view class="mainpadding tianshu">共{{dsay}}天</view> -->
		<view class="mainpadding ffffff">
			<view class="flexleft">
				<view class="strongtext margin_right">请假事由({{reason.length}}/200)</view>
				<view class="bitian">*</view>
			</view>
			<textarea class="textxzs " cols="30" maxlength="200" rows="10" placeholder="请输入" v-model="reason"></textarea>
		</view>
		<view class="mainpadding ffffff margin_top">
			<view class="strongtext">
				照片({{upImg.length}}/5)
			</view>
			<view class="flexleft" style="flex-wrap: wrap;">
				<view class="upimagebox flexleft flex_wrap"  v-for="(item,index) in upImg" :key="index">
					<view class="imgshangchuan margin_top">
						<image :src="item" mode=""></image>
						<view class="xiaocuohao" style="position: absolute;top: 0;right: -4%;" @click="shanchu(index)"></view>
					</view>
				</view>
				<view class="upimagebox flexleft" v-show="isshow">
					<view class="imgshangchuan margin_top" @click="uploadImg" >
						<image src="../../../static/image/system/shangchuan.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding ffffff margin_top flexbetween">
			<view class="strongtext">审批人</view>
			<view class="shenpiren">{{sp_name}}</view>
		</view>
		<view class="mainpadding">
			<view class="bigbtn" @click="submit">提交</view>
		</view>
		<!-- 分钟 -->
		<u-datetime-picker :show="showsf" v-model="valuef1" mode="datetime" @confirm="confirmf"
				@cancel="showsf=false" @close="showsf=false" ></u-datetime-picker>
		<u-datetime-picker :show="showssf" v-model="valuef2" mode="datetime" @confirm="confirmsf" @cancel="showssf=false"
				:minDate="mintime" @close="showssf=false" ></u-datetime-picker>
		<!-- 请假类型下拉框 -->
		<u-picker :show="qjlxShow" ref="uPicker" :columns="qjlxColumns" @confirm="qjlxConfirm" title="选择请假类型"
			keyName="name" @cancel="qjlxShow=false"></u-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				isshow:true,
				start:'',
				end:'',
				showsf:false,
				showssf:false,
				valuef1:Number(new Date()),
				valuef2:Number(new Date()),
				mintime:'',
				maxtime:'',
				reason:"",//请假事由
				upImg:[],
				// 请假类型列表
				qjlxShow: false,
				qjlxColumns: [],
				qjlxid: "",
				qjlxtext:"",
				qjlxtype:2,//请假状态1天，2分钟
				sp_name:"",//审批人
				sp_id:"",
				images:[],
			}
		},
		onLoad(){
			this.getqjlx()
			this.getspr()
		},
		computed:{
			day(){
				let days = (Number(this.maxtime) - Number(this.mintime)) / (1 * 24 * 60 * 60 * 1000)
				return days.toFixed(0)
			}
		},
		watch:{
			upImg(newval){
				if(this.upImg.length==5){
					this.isshow = false
				}else{
					this.isshow = true
				}
			}
		},
		methods: {
			getspr(){
				this.sp_name = this.$store.state.userInfo.bmstaffinfo.username
				this.sp_id = this.$store.state.userInfo.bmstaffinfo.id
			},
			submit(){
				if(this.qjlxid==""){
					httpRequest.toast('请选择请假类型')
					return false 
				}
				if(this.start==""){
					httpRequest.toast('请选择请假开始时间')
					return false 
				}
				if(this.end==""){
					httpRequest.toast('请选择请假结束时间')
					return false 
				}
				if(this.reason==""){
					httpRequest.toast('请填写请假原因')
					return false 
				}
				httpRequest.request('/dhtapi/user/addQj', 'POST', {
					qj_type_id:this.qjlxid,
					start_time:this.start,
					end_time:this.end,
					notes:this.reason,
					images:this.images.join(),
					apply_staff_id:this.sp_id
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code == 1){
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			},
			// 获取请假类型列表
			getqjlx(){
				httpRequest.request('/dhtapi/user/qjType', 'POST', {
				}).then(res => {
					this.qjlxColumns.push(res.data)
				})
			},
			// 员工列表确定
			qjlxConfirm(e) {
				this.qjlxtext = e.value[0].name
				this.qjlxid = e.value[0].id
				this.qjlxShow = false
				console.log(e)
			},
			shanchu(index){
			    this.upImg.splice(index,1)
			},
			shenpijl() {
				uni.navigateTo({
					url: "/pages/workbench/xiaoshou/shenpijl"
				})
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day
				function repair(i) {
				  if (i >= 0 && i <= 9) {
					return "0" + i; 
				  } else {
					return i;
				  }
				}
				return curTime
			  },
			timepicker(value){
				if(this.qjlxtext==""){
					httpRequest.toast("请选择请假类型")
					return false
				} if(value==1){
					this.showsf = true
				}else if(value==2){
					this.showssf = true
				}
			},
			// 天
			confirm(e){
				console.log(e);
				this.shows = false;
				this.show = true;
				this.end = '';
				this.mintime = e.value;
				this.start = this.date(e.value);
				this.currents = -1;
			},
			confirms(e){
				console.log(e);
				this.showss = false;
				this.show = true;
				this.maxtime = e.value;
				this.end = this.date(e.value);
				this.currents = -1;
			},
			// 分钟
			confirmf(e){
				console.log(e);
				this.showsf = false;
				this.showf = true;
				this.end = '';
				this.mintime = e.value;
				this.start = this.datetimeText(e.value);
				this.currents = -1;
			},
			confirmsf(e){
				console.log(e);
				this.showssf = false;
				this.showf = true;
				this.maxtime = e.value;
				this.end = this.datetimeText(e.value);
				this.currents = -1;
			},
			datetimeText(time){
				var date = new Date(time)
				var Y = date.getFullYear() + '-'
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
				return Y + M + D + h + m
			},
			starttime(e){
				this.shows = true;
			},
			endtime(){
				this.showss = true;
			},
			uploadImg() {
				let _this = this;
				let upImgs = _this.upImg;
				let num = 5 - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						console.log(res)
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], _this.upImg)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									console.log(res[i])
									_this.uploadImageService(res[i], _this.upImg)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			// 详情转载
			uploadImageService(url) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					_this.upImg.push(res.fullurl);
					_this.images.push(res.url);
				}).catch(err => {});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bigbtn {
		margin: 0;
		width: 100%;
		height: 82rpx;
		background: #00B855;
		border-radius: 41rpx;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.shenpiren {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}
	.upimagebox{
		width: 25%;
	}
	.imgshangchuan {
		margin-top: 20rpx;
		position: relative;
		width: 150rpx;
		height: 150rpx;
		border-radius: 15rpx;
		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 15rpx;
		}
		
	}

	.shenpi {
		color: #0BBDCB;
	}

	.textxz {
		text-align: right;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		margin-right: 18rpx;
	}

	.textxzs {
		font-size: 28rpx;
		margin-top: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		margin-right: 18rpx;
		width: 100%;
	}

	.flex1 {
		flex: 3;
	}

	.itembox {
		flex: 7;
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.06);
	}

	.tianshu {
		font-size: 24rpx;
		text-align: right;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}
</style>
